<div class="row">
  
  <!-- 今日动态 -->
  <div class="col-sm-12 col-md-12">
    <div class="panel panel-default" id="current_info">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>
        <h3 class="panel-title">
                  今日动态
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-12 col-md-12 text-left">
            <ul class="nav nav-pills" role="tablist">
              <li role="presentation"><a href="#">在线用户 <span class="badge">2037</span></a></li>
              <li role="presentation"><a href="#">注册用户 <span class="badge">102</span></a></li>
              <li role="presentation"><a href="#">上传视频 <span class="badge">19</span></a></li>
              <li role="presentation"><a href="#">收藏视频 <span class="badge">19</span></a></li>
              <li role="presentation"><a href="#">购买视频 <span class="badge">387</span></a></li>
              <li role="presentation"><a href="#">最新活动 <span class="badge">4</span></a></li>
              <li role="presentation"><a href="#">最新评论 <span class="badge">4092</span></a></li>
            </ul>
          </div>
        </div>      
      </div>
    </div>    
  </div>
  
  <!-- 用户统计图 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="user_info">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  用户统计图
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
          <canvas id="chart-user" width="500" height="500"></canvas>
        </div>
      </div>            
    </div>
  </div>   
  
  <!-- 视频统计图 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="video_info">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  视频统计图
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
          <canvas id="chart-video" width="500" height="500"></canvas>
        </div>
      </div>            
    </div>
  </div>
  
  <!-- 用户增长率 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="user_increase">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  用户增长率
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      月环比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 12%;">
                <span>12%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      月同比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 23%">
                <span>23%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      季环比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 16%">
                <span>16%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                        季同比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 37%">
                <span>37%</span>
              </div>
            </div>
          </div>
        </div>   
      </div>
    </div>
  </div>  
  
  <!-- 视频增长率 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="video_increase">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  视频增长率
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      月环比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 12%;">
                <span>12%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      月同比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 23%">
                <span>23%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                      季环比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 16%">
                <span>16%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-md-3 text-center">
                        季同比:
          </div>
          <div class="col-sm-9 col-md-9">
            <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 37%">
                <span>37%</span>
              </div>
            </div>
          </div>
        </div>   
      </div>
    </div>
  </div>  

  <!-- 下载视频TOP10 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="top_download">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  下载视频TOP10
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">        
            <ul class="list-group">
              <li class="list-group-item">
                <span class="badge">3000</span> Spring IOC
              </li>
              <li class="list-group-item">
                <span class="badge">2900</span> Spring AOP
              </li>
              <li class="list-group-item">
                <span class="badge">2800</span> Spring MVC
              </li>
              <li class="list-group-item">
                <span class="badge">2700</span> Struts2
              </li>
              <li class="list-group-item">
                <span class="badge">2600</span> Hibernate
              </li>
              <li class="list-group-item">
                <span class="badge">2500</span> Java SE
              </li>
              <li class="list-group-item">
                <span class="badge">2400</span> PS
              </li>
              <li class="list-group-item">
                <span class="badge">2300</span> 制作简历
              </li>
              <li class="list-group-item">
                <span class="badge">2200</span> 面试技巧
              </li>
              <li class="list-group-item">
                <span class="badge">2100</span> 面试题讲解
              </li>
            </ul>        
          </div>
        </div>
      </div>
    </div>
  </div>       
   
  <!-- 付费视频TOP10 -->
  <div class="col-sm-6 col-md-6">
    <div class="panel panel-default" id="top_pay">
      <!-- panel head -->
      <div class="panel-heading">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>      
        <h3 class="panel-title">
                  付费视频TOP10
        </h3>
      </div>
      <!-- panel body -->
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">        
            <ul class="list-group">
              <li class="list-group-item">
                <span class="badge">3000</span> Spring IOC
              </li>
              <li class="list-group-item">
                <span class="badge">2900</span> Spring AOP
              </li>
              <li class="list-group-item">
                <span class="badge">2800</span> Spring MVC
              </li>
              <li class="list-group-item">
                <span class="badge">2700</span> Struts2
              </li>
              <li class="list-group-item">
                <span class="badge">2600</span> Hibernate
              </li>
              <li class="list-group-item">
                <span class="badge">2500</span> Java SE
              </li>
              <li class="list-group-item">
                <span class="badge">2400</span> PS
              </li>
              <li class="list-group-item">
                <span class="badge">2300</span> 制作简历
              </li>
              <li class="list-group-item">
                <span class="badge">2200</span> 面试技巧
              </li>
              <li class="list-group-item">
                <span class="badge">2100</span> 面试题讲解
              </li>
            </ul>        
          </div>
        </div>
      </div>
    </div>
  </div>        
</div>

<div class="row">
  <div class="col-sm-12 col-md-12">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
    </button>
  </div>
</div>